<template>
    <div class="f-header">

        <span class="logo">

            <img src="~/assets/logo.png" alt="logo" style="margin-left: 5px;height: 55px;">

        </span>
        <span>
            MES REWORK
        </span>

        <div class="ml-auto flex items-center" style="margin-right: 30px;">
            <span class="flex items-center text-light-50">
                User
            </span>
            <span class="flex items-center text-light-50 exit">
                <img src="~/assets/exit.png" alt="logo" style="margin-left: 5px;height: 25px;">
                Exit
            </span>
        </div>

    </div>
</template>

<style>
.f-header {
    @apply flex items-center bg-sky-700 text-light-50 fixed top-0 left-0 right-0;
    height: 64px;
}

.logo {
    width: 250px;
    @apply flex justify-center items-center text-xl font-thin;
}

.exit {
    width: 60px;
    height: 45px;
    margin-left: 10px;
    @apply bg-sky-900;
}
</style>